<!--
 * new page
 * @author: YK
 * @since: 2024-01-10
 * index.vue
-->
<template>
  <div class="container">
    <div class="start">
      <el-time-select
        v-model="startTime"
        :max-time="endTime"
        class="mr-4"
        :placeholder="startPlaceholder"
        :start="startTimeStart"
        :step="startStep"
        :end="startTimeEnd"
        @change="handleStartChange"
        v-bind="$attrs.startOptions"
      />
    </div>
    <div>
      <el-time-select
        v-model="endTime"
        :min-time="startTime"
        :placeholder="endPlaceholder"
        :start="endTimeStart"
        :step="endStep"
        :end="endTimeEnd"
        @change="handleEndChange"
        v-bind="$attrs.endOptions"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
withDefaults(
  defineProps<{
    startPlaceholder?: string; // 开始时间占位符
    endPlaceholder?: string; // 结束时间占位符
    startTimeStart?: string; // 开始时间开始值
    startTimeEnd?: string; // 开始时间结束值
    endTimeStart?: string; // 结束时间开始值
    endTimeEnd?: string; // 结束时间结束值
    startStep?: string; // 开始时间步长
    endStep?: string; // 结束时间步长
  }>(),
  {
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
    startTimeStart: "08:00",
    startTimeEnd: "24:00",
    endTimeStart: "08:00",
    endTimeEnd: "24:00",
    startStep: "00:15",
    endStep: "00:15",
  }
);
let emits = defineEmits<{
  (e: "startTimeHandle", value: string): void;
  (e: "endTimeHandle", value: string): void;
}>();
const startTime = ref<string>("");
const endTime = ref<string>("");
const handleStartChange = (val: string) => {
  console.log("开始时间", val);
  startTime.value = val;
  emits("startTimeHandle", val);
};
const handleEndChange = (val: string) => {
  console.log("结束时间", val);
  endTime.value = val;
  emits("endTimeHandle", val);
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  .start {
    margin-right: 20px;
  }
}
</style>
